import { Message, Tabs, Typography } from '@arco-design/web-react';
import DetailModal from '@src/components/detailModal';
import { useEffect, useState } from 'react';
import { apiPreViewCode } from '../api';
interface Props {
  tableId: string;
  onClose: () => void;
}
export default function PreViewDialog({ tableId, onClose }: Props) {
  const [preview, setPreview] = useState<{ [x: string]: string }>({});
  useEffect(() => {
    loadPreViewData();
  }, []); //eslint-disable-line

  async function loadPreViewData() {
    try {
      let res = await apiPreViewCode(tableId);
      let data = res.data;
      if (data.code === 200) {
        setPreview(data.data);
      } else {
        Message.warning(data.msg ?? '获取预览代码失败');
      }
    } catch (e: any) {
      Message.error(e.message ?? '获取预览代码失败');
    }
  }
  let items = Object.keys(preview).map((i, idx) => {
    let messageData = preview[i];

    messageData = messageData.replaceAll('<', '&lt;');
    messageData = messageData.replaceAll('>', '&gt;');
    messageData = messageData.replaceAll(' ', '&nbsp;');
    messageData = messageData.replaceAll('import', '<span class="text-orange-color">import</span>');
    messageData = messageData.replaceAll('public', '<span class="text-blue-color">public</span>');
    messageData = messageData.replaceAll('private', '<span class="text-blue-color">private</span>');
    messageData = messageData.replaceAll('return', '<span class="text-error-color">return</span>');
    messageData = messageData.replaceAll('@', '<span class="text-magenta-color">@</span>');
    messageData = messageData.replaceAll('Long', '<span class="text-purple-color">Long</span>');
    messageData = messageData.replaceAll('Intager', '<span class="text-purple-color">Intager</span>');
    messageData = messageData.replaceAll('String', '<span class="text-purple-color">String</span>');
    let t = messageData.split('\r\n');
    t = t.map((i) => {
      if (i.includes('*')) {
        return '<div class="text-green-color">' + i + '</div>';
      }
      return i;
    });
    messageData = t.join('\r\n');
    messageData = messageData.replaceAll('\r\n', '<div/>');

    return {
      key: idx.toString(),
      label: i,
      children: <div className="maxh-400 scroll-bar-h-min" dangerouslySetInnerHTML={{ __html: messageData }}></div>,
    };
  });
  return (
    <DetailModal
      show
      confirmBtnShow={false}
      className="w-900"
      contentClassName="minh-500"
      cancelText="关闭"
      title="代码预览"
      onCancel={onClose}
    >
      <Tabs className="maxw-820">
        {items.map((i) => (
          <Tabs.TabPane key={i.key} title={i.label}>
            <Typography.Paragraph>{i.children}</Typography.Paragraph>
          </Tabs.TabPane>
        ))}
      </Tabs>
    </DetailModal>
  );
}
